<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/topcm.css">
    <link rel="stylesheet" href="../css/product.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/slider.css">
</head>

<body>
    <!-- 首页 -->
    <!-- 页眉 -->
    <div id="header" class="colorb8 clearfix">
        <div class="top  bgc10 clearfix">
            <div class="wrapper">
                <div class="fr top-div">w
                    欢迎光临
                    <a href="./index.html" class="colorf60">乐购</a>请
                    <span>登录</span>
                    \
                    <a href="./reg.html" class="colorf60">注册</a>
                </div>
            </div>
        </div>

        <!-- 搜索框 购物车 我的订单 -->
        <div class="wrapper clearfix posr">
            <!-- logo -->
            <img src="../images/logo.jpg" alt="" class="bgcf60">

            <!-- 购物车 -->
            <div class="showCar fr">
                <a href="./shopping.html" class="Car bgcf60">购物车 <span>2</span></a>
                <a href="" class="bgceb order">我的订单</a>
            </div>

            <!--  搜索框  -->
            <div class="imgbox3">
                <form action="" class="fr imgbox">
                    <input type="text" class="bgcfff txt fl">
                    <input type="submit" class="submit fl bgcfff">
                </form>
            </div>

        </div>
        <!-- 导航栏 -->
        <div class="wrapper clearfix">
            <ul class="">
                <li><a href="./product.html">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">户外运动</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家具</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地产特色</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>

    <!-- 海报 -->
    <div class="clearfix wrapper hailar">
        <!-- 轮播图 -->
        <div class="bannerbox fl">
            <!--轮播开始-->
            <div class="pptbox" id="bannerSlider">
                <!--轮播的内容-->
                <ul class="innerwrapper">
                    <li>
                        <a href="#"><img src="../images/banner1.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="../images/banner2.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="../images/banner3.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="../images/banner4.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="../images/banner5.jpg" /></a>
                    </li>
                </ul>
                <!--数字控制器-->
                <ul class="controls">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <!--按钮控制器-->
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>
            <!--轮播结束-->
        </div>

        <!-- 百叶窗 -->
        <div class="fr clearfix hailarbox">
            <h3 class="fsize18">新书畅销榜</h3>
            <ul class="clearfix fl">
                <li class="clearfix">
                    <span class="fr">1</span>
                    <div class="fl clearfix bookblock">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>

                <li class="clearfix">
                    <span class="fr">2</span>
                    <div class="fl clearfix">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>

                <li class="clearfix">
                    <span class="fr">3</span>
                    <div class="fl clearfix">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>

                <li class="clearfix">
                    <span class="fr">4</span>
                    <div class="fl clearfix">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>

                <li class="clearfix">
                    <span class="fr">5</span>
                    <div class="fl clearfix">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>

                <li class="clearfix">
                    <span class="fr">6</span>
                    <div class="fl clearfix">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>

                <li class="clearfix">
                    <span class="fr">7</span>
                    <div class="fl clearfix">
                        <img src="../images/23579654-1_l.jpg" alt="" class="fl">
                        <p class="fl">从你的世界路过一场巳时的风暴</p>
                    </div>
                </li>
            </ul>
        </div>

        <img src="../images/111111111111111_03.jpg" alt="">
    </div>

    <!-- 折扣专区 -->
    <div class="discount clearfix wrapper">
        <div class="disdiv">
            <h2 class="fsize24 cfff bgcf60">乐购·图书折扣区</h2>
        </div>
        <div>
            <ul class="clearfix">
                <script>
                    for (let i = 0; i < 10; i++) {
                        document.write(`
                            <li>
                        <img src="../images/22870923-1_l_1.jpg" alt="">
                        <img src="../images/limitTime.jpg" alt="">
                        <h5>白夜行  东野上吾</h5>
                        <p>爱看不看</p>
                        <p class="fsize24 colorf4">￥:38 <del class="colorbf">￥:46</del></p> 
                    </li>
                        `)

                    }
                </script>
            </ul>
        </div>

    </div>

    <!-- 新书上架 -->
    <div class="wrapper newBok">
        <!-- 标题 -->
        <div class="newh2"><h2><span class="fsize28">新</span>书上架</h2></div>
        <!-- 内容 -->
        <div class="clearfix">
            <div class="newBok1 fl">
                <ul class="clearfix">
                    <script>
                        for (let i = 0; i < 10; i++) {
                            document.write(`
                            <li class="fl">
                        <img src="../images/22499729-1_l_5.jpg" alt="">
                        <h5>蓬勃而不</h5>
                        <div>805出版社出版</div>
                        <p class="fsize24 colorf4">￥:38 <del class="colorbf">￥:46</del></p> 
                    </li>
                            `)
                            
                        }
                    </script>
                </ul>
    
            </div>
    
    
            <!-- 百叶窗 -->
            <div class="fl newBok2">
                <h3 class="fsize18 cf60">主编推荐</h3>
                <ul class="clearfix fl">
                    <li class="clearfix">
                            <span class="fl">1</span>
                            <h5 class="off ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix on">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
    
                    <li>
                        <span class="fl">2</span>
                        <h5 class="ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
    
                    <li>
                        <span class="fl">3</span>
                        <h5 class="ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
    
                    <li>
                        <span class="fl">4</span>
                        <h5 class="ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
    
                    <li>
                        <span class="fl">5</span>
                        <h5 class="ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
    
                    <li>
                        <span class="fl">6</span>
                        <h5 class="ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
    
                    <li>
                        <span class="fl">7</span>
                        <h5 class="ccyan">就喜欢你看不惯我,又干不</h5>
                        <div class="fl clearfix">
                            <img src="../images/index08_05.jpg" alt="" class="fl">
                            <p class="fl">从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界路过从你的世界</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 独家提供 -->
    <div class="wrapper clearfix">

        <div id="alonebox">
            <!-- 7个 -->
            <div class="clearfix aloneh2">
                <h2 class="fl fsize22"><span class="fsize28 bgcf60 cfff">独</span>家提供</h2>
                <ul class="fr">
                    <li>货币金融</li>
                    <li>社会文学</li>
                    <li>科学技术</li>
                    <li>儿童文学</li>
                    <li>教育参辅</li>
                    <li>生活</li>
                    <li>小说</li>
                </ul>
            </div>
            <!-- 12本书 -->
            <!--轮播开始-->
            <div class="pptbox" id="listSlide">
                <!--轮播的内容-->
                <ul class="innerwrapper">
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                        <div class="tcenter">
                                            <img src="../images/pro-demo.jpg" alt="">
                                        </div>
                                        <h3 class="fnormal c3 ti5">
                                            查理 斯密斯
                                        </h3>
                                        <p class="c4d ti5">
                                            中国邮电出版社
                                        </p>
                                        <p class="cf4 ti5">
                                            &yen;49
                                            <del class="c80">&yen;79</del>
                                        </p>
                                        </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>

                </ul>
                <!--数字控制器-->
                <ul class="controls">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                </ul>
                <!--按钮控制器-->
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>
            <!--轮播结束-->
        </div>

        <!-- 猜你喜欢 -->
    </div>

    <!-- 猜你喜欢 -->
    <div class="wrapper clearfix">

        <div id="guess">
            <!-- 换一换 -->
            <div class="clearfix aloneh2">
                <h2 class="fl fsize22"><span class="fsize28 bgcf60 cfff">猜</span>你喜欢</h2>
                <ul class="fr">
                    <li>换一换</li>
                </ul>
            </div>
            <!-- 12本书 -->
            <div class="guessbox">
                <div class="gunessdiv">
                    <!-- 1页 -->
                    <div class="alonebox1 clearfix">
                        <ul class=" clearfix">
                            <li>
                                <div><img src="../images/pro-demo.jpg" alt=""></div>
                                <h5>查理</h5>
                                <p>中国出版社</p>
                                <p>&yen;49 原价<del>&yen;99</del></p>
                            </li>
                            <script>
                                for (let i = 0; i < 11; i++) {
                                    document.write(`
                                <li>
                            <div><img src="../images/pro-demo.jpg" alt=""></div>
                            <h5>查理</h5>
                            <p>中国出版社</p>
                            <p>&yen;49 原价<del>&yen;99</del></p>
                        </li>
                                `)
                                }
                            </script>

                        </ul>
                    </div>
                    <!-- 2页 -->
                    <div class="alonebox1 clearfix">
                        <ul>
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                                <li>
                            <div><img src="../images/pro-demo.jpg" alt=""></div>
                            <h5>查理1</h5>
                            <p>中国出版社</p>
                            <p>&yen;49 原价<del>&yen;99</del></p>
                        </li>
                                `)
                                }
                            </script>

                        </ul>
                    </div>
                    <!-- 3页 -->
                    <div class="alonebox1 clearfix">
                        <ul>
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                                <li>
                            <div><img src="../images/pro-demo.jpg" alt=""></div>
                            <h5>查理3</h5>
                            <p>中国出版社</p>
                            <p>&yen;49 原价<del>&yen;99</del></p>
                        </li>
                                `)
                                }
                            </script>

                        </ul>
                    </div>
                    <!-- 4页 -->
                    <div class="alonebox1 clearfix">
                        <ul>
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                                <li>
                            <div><img src="../images/pro-demo.jpg" alt=""></div>
                            <h5>查理4</h5>
                            <p>中国出版社</p>
                            <p>&yen;49 原价<del>&yen;99</del></p>
                        </li>
                                `)
                                }
                            </script>

                        </ul>
                    </div>
                </div>

            </div>


        </div>
    </div>


    <!-- 页脚 -->
    <div id="footer">
        <div class="footerbox">
            <img src="../images/222_11.png" alt="">
            <img src="../images/222_13.png" alt="">
            <img src="../images/222_15.png" alt="">
            <img src="../images/222_17.png" alt="">
        </div>
        <div class="footerbox1  clearfix">
            <ul class="fl">
                <li class="fsizwb">专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
            </ul>
            <ul class="fl">
                <li class="fsizwb">专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
            </ul>

            <ul class="fl">
                <li class="fsizwb">专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
            </ul>

            <ul class="fl">
                <li class="fsizwb">专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
            </ul>

            <ul class="fl">
                <li class="fsizwb">专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
                <li>专业客服</li>
            </ul>
            <img src="../images/logo.jpg" alt="" class="fl">
        </div>
        <div class="footerbox2">
            <p>公司简介 | Investor Relations | 网站联盟 | 乐购招商 | 机构销售 | 手机乐购 | 官方Blog | 热词搜索</p>
            <p>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
    </div>

    <script src="../js/jquery-1.11.0.js"></script>
    <script src="../js/slider.js"></script>
    <script src="../js/home.js"></script>
    <script src="../js/com.js"></script>
</body>

</html>